<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/home-style.css">
<script>
			function da(photo_1,photo_2){
            var a=document.getElementById(photo_1);
            var b=document.getElementById(photo_2);
            a.style.webkitAnimation="da 1s forwards";
            b.style.display="block";
        }
        function xiao(photo_1,photo_2){
            var a=document.getElementById(photo_1);
            var b=document.getElementById(photo_2);
            a.style.webkitAnimation="xiao 1s forwards";
            b.style.display="none";
        }
        
    </script>
<style>

#pre{
			top: 350px;
			width: 180px;
			
			position: absolute;
		}
		#next{
			top: 350px;
			width: 180px;
			left: 1700px;
			position: absolute;
		}

</style>
</head>
<body>
	<img id="pre" src="images/img/上一页0.png" >
		<img id="next" src="images/img/下一页0.png" >
	<div class="B">
			<div class="b">
				<div class="b1">
					<h2>
						歌单推荐
					</h2>
				</div>
				<div class="b2">
					<nav>
						<a href="javascript:void(0)">为你推荐</a>
						<a href="javascript:void(0)">KTV热歌</a>
						<a href="javascript:void(0)">轻音乐</a>
						<a href="javascript:void(0)">日语</a>
						<a href="javascript:void(0)">官方歌单</a>
						<a href="javascript:void(0)">情歌</a>
					</nav>
				</div>
				<div class="b3">
					<ul class="palylist__list slide__list">
						<li class="palylist__item slide__item">
							<div class="palylist__item_box">
								<div onmousemove="da('photo_a_0','photo_b_0')" onmouseout="xiao('photo_a_0','photo_b_0')" class="palylist__cover">
									<a href="PlaySerlet?mid0=3&mid1=1&mid2=4&mid3=5&mid4=6">
										<img id="photo_a_0" name="img10" onmousemove="da('photo_a_0','photo_b_0')" onmouseout="xiao('photo_a_0','photo_b_0')" src="images/am1.jpg"
										 alt="">
										<img id="photo_b_0"  onmousemove="da('photo_a_0','photo_b_0')" onmouseout="xiao('photo_a_0','photo_b_0')" src="images/play.png"
										 alt="">

									</a>
								</div>
								<h4 class="palylist__title">
									<span class="palylist__title_txt"><a href="#" name="Album">林俊杰</a></span>
								</h4>
								<div class="palylist__other">
									播放量：42.7万
								</div>

							</div>
						</li>
						<li class="palylist__item slide__item">
							<div class="palylist__item_box">
								<div onmousemove="da('photo_a','photo_b')" onmouseout="xiao('photo_a','photo_b')" class="palylist__cover">
									<a href="PlaySerlet?mid0=8&mid1=9&mid2=10&mid3=11&mid4=12">
										<img name="img10" name="img10" id="photo_a" onmousemove="da('photo_a','photo_b')" onmouseout="xiao('photo_a','photo_b')" src="images/am2.jpg"
										 alt="">
										<img id="photo_b" onmousemove="da('photo_a','photo_b')" onmouseout="xiao('photo_a','photo_b')" src="images/play.png"
										 alt="">

									</a>
								</div>
								<h4 class="palylist__title">
									<span class="palylist__title_txt"><a href="#" name="Album">欧美 | Taylor Swift</a></span>
								</h4>
								<div class="palylist__other">
									播放量：40.3万
								</div>

							</div>
						</li>
						<li class="palylist__item slide__item">
							<div class="palylist__item_box">
								<div onmousemove="da('photo_a_1','photo_b_1')" onmouseout="xiao('photo_a_1','photo_b_1')" class="palylist__cover">
									<a href="PlaySerlet?mid0=27&mid1=29&mid2=30&mid3=28&mid4=32">
										<img id="photo_a_1" name="img10" onmousemove="da('photo_a_1','photo_b_1')" onmouseout="xiao('photo_a_1','photo_b_1')" src="images/am3.jpg"
										 alt="">
										<img id="photo_b_1" onmousemove="da('photo_a_1','photo_b_1')" onmouseout="xiao('photo_a_1','photo_b_1')" src="images/play.png"
										 alt="">

									</a>
								</div>
								<h4 class="palylist__title">
									<span class="palylist__title_txt"><a href="" name="Album">来自天堂的魔鬼  | 邓紫棋</a></span>
								</h4>
								<div class="palylist__other">
									播放量：74.7万
								</div>

							</div>
						</li>
						<li class="palylist__item slide__item">
							<div class="palylist__item_box">
								<div onmousemove="da('photo_a_2','photo_b_2')" onmouseout="xiao('photo_a_2','photo_b_2')" class="palylist__cover">
									<a href="PlaySerlet?mid0=20&mid1=21&mid2=22&mid3=23&mid4=24">
										<img id="photo_a_2" name="img10" onmousemove="da('photo_a_2','photo_b_2')" onmouseout="xiao('photo_a_2','photo_b_2')" src="images/am4.jpg"
										 alt="">
										<img id="photo_b_2" onmousemove="da('photo_a_2','photo_b_2')" onmouseout="xiao('photo_a_2','photo_b_2')" src="images/play.png"
										 alt="">

									</a>
								</div>
								<h4 class="palylist__title">
									<span class="palylist__title_txt"><a href="#" name="Album">岁月神偷｜周笔畅</a></span>
								</h4>
								<div class="palylist__other">
									播放量：61.6万
								</div>

							</div>
						</li>
						<li class="palylist__item slide__item">
							<div class="palylist__item_box">
								<div onmousemove="da('photo_a_3','photo_b_3')" onmouseout="xiao('photo_a_3','photo_b_3')" class="palylist__cover">
									<a href="PlaySerlet?mid0=6&mid1=7&mid2=12&mid3=5&mid4=21">
										<img id="photo_a_3" name="img10" onmousemove="da('photo_a_3','photo_b_3')" onmouseout="xiao('photo_a_3','photo_b_3')" src="images/am5.jpg"
										 alt="">
										<img id="photo_b_3" onmousemove="da('photo_a_3','photo_b_3')" onmouseout="xiao('photo_a_3','photo_b_3')" src="images/play.png"
										 alt="">

									</a>
								</div>
								<h4 class="palylist__title">
									<span class="palylist__title_txt"><a href="#" name="Album">十一月的萧邦 | 周杰伦</a></span>
								</h4>
								<div class="palylist__other">
									播放量：53.9万
								</div>

							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="C">
			<div class="c">
				<div class="c11">
					<h2 class="c111">精彩推荐</h2>
				</div>
				<div class="c12">
					<div class="c121">
						<a href="#"><img src="images/am6.jpg" alt=""></a>
					</div>
					<div class="c122">
						<a href="#"><img src="images/am7.jpg" alt=""></a>
					</div>
				</div>
			</div>
		</div>
		<div class="D">
			<div class="d">
				<h2 class="d1">新碟首发</h2>
				<div class="d2">
					<nav>
						<a href="javascript:void(0)">内地</a>
						<a href="javascript:void(0)">港台</a>
						<a href="javascript:void(0)">欧美</a>
						<a href="javascript:void(0)">韩国</a>
						<a href="javascript:void(0)">日本</a>
						<a href="javascript:void(0)">更多</a>
					</nav>
				</div>
				<div class="d3">
					<ul class="d31">
						<li class="d311">
							<div class="">
								<div class="z1">
									<div onmousemove="da('photo_a_4','photo_b_4')" onmouseout="xiao('photo_a_4','photo_b_4')" class="palylist__cover">
										<a href="">
											<img id="photo_a_4" onmousemove="da('photo_a_4','photo_b_4')" onmouseout="xiao('photo_a_4','photo_b_4')" src="images/am12.jpg"
											 alt="">
											<img id="photo_b_4" onmousemove="da('photo_a_4','photo_b_4')" onmouseout="xiao('photo_a_4','photo_b_4')" src="images/play.png"
											 alt="">
										</a>
									</div>
								</div>
								<h4 class="z3">
									<a href="#">别找我麻烦</a></h4>
								<div class="z2"><a href="#">封茗</a></div>
							</div>
						</li>
						<li class="d311 ">
							<div class="">
								<div class="z1 ">
									<div onmousemove="da('photo_a_5','photo_b_5')" onmouseout="xiao('photo_a_5','photo_b_5')" class="palylist__cover">
										<a href="javascript:void(0)">
											<img id="photo_a_5" onmousemove="da('photo_a_5','photo_b_5')" onmouseout="xiao('photo_a_5','photo_b_5')" src="images/am3.jpg"
											 alt="">
											<img id="photo_b_5" onmousemove="da('photo_a_5','photo_b_5')" onmouseout="xiao('photo_a_5','photo_b_5')" src="images/play.png"
											 alt="">

										</a>
									</div>
								</div>
								<h4 class="z3">
									<a href="#">来自天堂的魔鬼</a></h4>
								<div class="z2"><a href="3">邓紫棋</a></div>
							</div>
						</li>
						<li class="d311 ">
							<div class="">
								<div class="z1 ">
									<div onmousemove="da('photo_a_7','photo_b_7')" onmouseout="xiao('photo_a_7','photo_b_7')" class="palylist__cover">
										<a href="javascript:void(0)">
											<img id="photo_a_7" onmousemove="da('photo_a_7','photo_b_7')" onmouseout="xiao('photo_a_7','photo_b_7')" src="images/am4.jpg"
											 alt="">
											<img id="photo_b_7" onmousemove="da('photo_a_7','photo_b_7')" onmouseout="xiao('photo_a_7','photo_b_7')" src="images/play.png"
											 alt="">
										</a>
									</div>
								</div>
								<h4 class="z3">
									<a href="#">岁月神偷</a></h4>
								<div class="z2"><a href="#">周笔畅</a></div>
							</div>
						</li>
						<li class="d311 ">
							<div class="">
								<div class="z1 ">
									<div onmousemove="da('photo_a_8','photo_b_8')" onmouseout="xiao('photo_a_8','photo_b_8')" class="palylist__cover">
										<a href="javascript:void(0)">
											<img id="photo_a_8" onmousemove="da('photo_a_8','photo_b_8')" onmouseout="xiao('photo_a_8','photo_b_8')" src="images/am12.jpg"
											 alt="">
											<img id="photo_b_8" onmousemove="da('photo_a_8','photo_b_8')" onmouseout="xiao('photo_a_8','photo_b_8')" src="images/play.png"
											 alt="">

										</a>
									</div>
								
							</div>
								<h4 class="z3">
									<a href="">最苦的甜</a>
								</h4>
								<div class="z2"><a href="#">胡夏</a></div>
							</div>
						</li>
						<li class="d311 ">
							<div class="">
								<div class="z1 ">
									<div onmousemove="da('photo_a_9','photo_b_9')" onmouseout="xiao('photo_a_9','photo_b_9')" class="palylist__cover">
										<a href="javascript:void(0)">
											<img id="photo_a_9" onmousemove="da('photo_a_9','photo_b_9')" onmouseout="xiao('photo_a_9','photo_b_9')" src="images/am1.jpg"
											 alt="">
											<img id="photo_b_9" onmousemove="da('photo_a_9','photo_b_9')" onmouseout="xiao('photo_a_9','photo_b_9')" src="images/play.png"
											 alt="">

										</a>
									</div>
								</div>
								<h4 class="z3">
									<a href="#">雪落下的声音</a></h4>
								<div class="z2"><a href="#">林俊杰</a></div>
							</div>
						</li>
						<li class="d311 ">
							<div class="">
								<div class="z1 ">
									<div onmousemove="da('photo_a_10','photo_b_10')" onmouseout="xiao('photo_a_10','photo_b_10')" class="palylist__cover">
										<a href="javascript:void(0)">
											<img id="photo_a_10" onmousemove="da('photo_a_10','photo_b_10')" onmouseout="xiao('photo_a_10','photo_b_10')"
											 src="images/am2.jpg" alt="">
											<img id="photo_b_10" onmousemove="da('photo_a_10','photo_b_10')" onmouseout="xiao('photo_a_10','photo_b_10')"
											 src="images/play.png" alt="">

										</a>
									</div>
								</div>
								<h4 class="z3">
									<a href="#">欧美金曲</a></h4>
								<div class="z2"><a href="#">Taylor Swift</a></div>
							</div>
						</li>
						<li class="d311 ">
							<div class="">
								<div class="z1 ">
									<div onmousemove="da('photo_a_11','photo_b_11')" onmouseout="xiao('photo_a_11','photo_b_11')" class="palylist__cover">
										<a href="">
											<img id="photo_a_11" onmousemove="da('photo_a_11','photo_b_11')" onmouseout="xiao('photo_a_11','photo_b_11')"
											 src="images/am15.jpg" alt="">
											<img id="photo_b_11" onmousemove="da('photo_a_11','photo_b_11')" onmouseout="xiao('photo_a_11','photo_b_11')"
											 src="images/play.png" alt="">

										</a>
									</div>
								</div>
								<h4 class="z3">
									<a href="">灯火人间</a></h4>
								<div class="z2"><a href="#">赵方婧</a></div>
							</div>
						</li>
						<li class="d311 ">
							<div class="">
								<div class="z1 ">
									<div onmousemove="da('photo_a_12','photo_b_12')" onmouseout="xiao('photo_a_12','photo_b_12')" class="palylist__cover">
										<a href="javascript:void(0)">
											<img id="photo_a_12" onmousemove="da('photo_a_12','photo_b_12')" onmouseout="xiao('photo_a_12','photo_b_12')"
											 src="images/am16.jpg" alt="">
											<img id="photo_b_12" onmousemove="da('photo_a_12','photo_b_12')" onmouseout="xiao('photo_a_12','photo_b_12')"
											 src="images/play.png" alt="">

										</a>
									</div>
								</div>
								<h4 class="z3">
									<a href="#">拜拜拜</a></h4>
								<div class="z2"><a href="#">季彦霖</a></div>
							</div>
						</li>
						<li class="d311 ">
							<div class="">
								<div class="z1 ">
									<div onmousemove="da('photo_a_17','photo_b_17')" onmouseout="xiao('photo_a_17','photo_b_17')" class="palylist__cover">
										<a href="javascript:void(0)">
											<img id="photo_a_17" onmousemove="da('photo_a_17','photo_b_17')" onmouseout="xiao('photo_a_17','photo_b_17')"
											 src="images/am17.jpg" alt="">
											<img id="photo_b_17" onmousemove="da('photo_a_17','photo_b_17')" onmouseout="xiao('photo_a_17','photo_b_17')"
											 src="images/play.png" alt="">

										</a>
									</div>
								</div>
								<h4 class="z3">
									<a href="#">哪吒闹</a></h4>
								<div class="z2"><a href="#">大张伟</a></div>
							</div>
						</li>



					</ul>
				</div>
			</div>
		</div>
		<div class="E">
			<div class="e">
				<div class="e1">
					<h2>排行榜</h2>
				</div>
				<div class="e2">
					<ul class="e21">
						<li class="z11">
							<div class="z111">
								<h4>巅峰榜</h4>
								<h3><a href="#">流行指数</a></h3>
								<div class="e211">
									<div class="e211a">
										<div class="e211a_1">1</div>
										<div class="e211a_2"><a href="#">我们</a></div>
										<div class="e211a_3"><a href="#">吴青峰</a></div>
									</div>
									<div class="e211a">
										<div class="e211a_1">2</div>
										<div class="e211a_2"><a href="#">你的爱情</a></div>
										<div class="e211a_3"><a href="#">逃跑计划</a></div>
									</div>
									<div class="e211a">
										<div class="e211a_1">3</div>
										<div class="e211a_2"><a href="#">要死就一定死在你手里</a></div>
										<div class="e211a_3"><a href="#">杨坤</a></div>
									</div>
								</div>
							</div>
						</li>
						<li class="z12">
							<div class="z111">
								<h4>巅峰榜</h4>
								<h3><a href="#">热歌</a></h3>
								<div class="e211">
									<div class="e211a">
										<div class="e211a_1">1</div>
										<div class="e211a_2"><a href="">知否知否</a></div>
										<div class="e211a_3"><a href="#">胡夏/郁可唯</a></div>
									</div>
									<div class="e211a">
										<div class="e211a_1">2</div>
										<div class="e211a_2"><a href="#">不为谁而作的歌</a></div>
										<div class="e211a_3"><a href="#">林俊杰</a></div>
									</div>
									<div class="e211a">
										<div class="e211a_1">3</div>
										<div class="e211a_2"><a href=""></a></div>
										<div class="e211a_3"><a href="#">G.E.M 邓紫棋</a></div>
									</div>
								</div>
							</div>
						</li>
						<li class="z13">
							<div class="z111">
								<h4>巅峰榜</h4>
								<h3><a href="#">新歌</a></h3>
								<div class="e211">
									<div class="e211a">
										<div class="e211a_1">1</div>
										<div class="e211a_2"><a href="#">深渊</a></div>
										<div class="e211a_3"><a href="#">谢霆锋/王嘉尔</a></div>
									</div>
									<div class="e211a">
										<div class="e211a_1">2</div>
										<div class="e211a_2"><a href="#">Hellow My Love</a></div>
										<div class="e211a_3"><a href="#">Westlife</a></div>
									</div>
									<div class="e211a">
										<div class="e211a_1">3</div>
										<div class="e211a_2"><a href="#">一半人生</a></div>
										<div class="e211a_3"><a href="#">阿信</a></div>
									</div>
								</div>
							</div>
						</li>
						<li class="z14">
							<div class="z111">
								<h4>巅峰榜</h4>
								<h3><a href="#">欧美</a></h3>
								<div class="e211">
									<div class="e211a">
										<div class="e211a_1">1</div>
										<div class="e211a_2"><a href="#">XXXXX</a></div>
										<div class="e211a_3"><a href="#">XXXXX</a></div>
									</div>
									<div class="e211a">
										<div class="e211a_1">2</div>
										<div class="e211a_2"><a href="#">XXXXX</a></div>
										<div class="e211a_3"><a href="#">XXXXX</a></div>
									</div>
									<div class="e211a">
										<div class="e211a_1">3</div>
										<div class="e211a_2"><a href="#">XXXXXX</a></div>
										<div class="e211a_3"><a href="#">XXXXX</a></div>
									</div>
								</div>
							</div>
						</li>
						<li class="z15">
							<div class="z111">
								<h4>巅峰榜</h4>
								<h3><a href="#">韩国</a></h3>
								<div class="e211">
									<div class="e211a">
										<div class="e211a_1">1</div>
										<div class="e211a_2"><a href="#">XXX</a></div>
										<div class="e211a_3"><a href="#">XXXX</a></div>
									</div>
									<div class="e211a">
										<div class="e211a_1">2</div>
										<div class="e211a_2"><a href="#">XXX</a></div>
										<div class="e211a_3"><a href="#">XXX</a></div>
									</div>
									<div class="e211a">
										<div class="e211a_1">3</div>
										<div class="e211a_2"><a href="#">XXXX</a></div>
										<div class="e211a_3"><a href="#">金请夏</a></div>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
			<div class="B">
			<div class="b">
				<div class="e1">
					<h2><b>MV</b></h2>
				</div>
				<div class="b2">
					<nav>
						<a href="javascript:void(0)">金选</a>
						<a href="javascript:void(0)">内地</a>
						<a href="javascript:void(0)">韩国</a>
						<a href="javascript:void(0)">台湾</a>
						<a href="javascript:void(0)">欧美</a>
						<a href="javascript:void(0)">日本</a>
					</nav>
				</div>
				<div class="b3">
					<ul class="palylist__list slide__list">
						<li class="palylist__item slide__item">
							<div class="palylist__item_box">
								<div onmousemove="da('photo_a_01','photo_b_01')" onmouseout="xiao('photo_a_01','photo_b_01')" class="palylist__cover">
									<a href="PlaySerlet?mid0=3&mid1=1&mid2=4&mid3=5&mid4=6">
										<img id="photo_a_01" onmousemove="da('photo_a_01','photo_b_01')" onmouseout="xiao('photo_a_01','photo_b_01')" src="images/am1.jpg"
										 alt="">
										<img id="photo_b_01" onmousemove="da('photo_a_01','photo_b_01')" onmouseout="xiao('photo_a_01','photo_b_01')" src="images/play.png"
										 alt="">

									</a>
								</div>
								<h4 class="palylist__title">
									<span class="palylist__title_txt"><a href="#">林俊杰</a></span>
								</h4>
								<div class="palylist__other">
									播放量：2.8万
								</div>

							</div>
						</li>
						<li class="palylist__item slide__item">
							<div class="palylist__item_box">
								<div onmousemove="da('photo_a1','photo_b1')" onmouseout="xiao('photo_a1','photo_b1')" class="palylist__cover">
									<a href="PlaySerlet?mid0=8&mid1=9&mid2=10&mid3=11&mid4=12">
										<img id="photo_a1" onmousemove="da('photo_a1','photo_b1')" onmouseout="xiao('photo_a','photo_b')" src="images/am2.jpg"
										 alt="">
										<img id="photo_b1" onmousemove="da('photo_a1','photo_b1')" onmouseout="xiao('photo_a','photo_b')" src="images/play.png"
										 alt="">

									</a>
								</div>
								<h4 class="palylist__title">
									<span class="palylist__title_txt"><a href="#">欧美 | Taylor Swift</a></span>
								</h4>
								<div class="palylist__other">
									播放量：40.3万
								</div>

							</div>
						</li>
						<li class="palylist__item slide__item">
							<div class="palylist__item_box">
								<div onmousemove="da('photo_a_11','photo_b_11')" onmouseout="xiao('photo_a_1','photo_b_1')" class="palylist__cover">
									<a href="PlaySerlet?mid0=27&mid1=29&mid2=30&mid3=28&mid4=32">
										<img id="photo_a_11" onmousemove="da('photo_a_11','photo_b_11')" onmouseout="xiao('photo_a_11','photo_b_11')" src="images/am3.jpg"
										 alt="">
										<img id="photo_b_11" onmousemove="da('photo_a_11','photo_b_11')" onmouseout="xiao('photo_a_11','photo_b_11')" src="images/play.png"
										 alt="">

									</a>
								</div>
								<h4 class="palylist__title">
									<span class="palylist__title_txt"><a href="">来自天堂的魔鬼  | 邓紫棋</a></span>
								</h4>
								<div class="palylist__other">
									播放量：74.7万
								</div>

							</div>
						</li>
						<li class="palylist__item slide__item">
							<div class="palylist__item_box">
								<div onmousemove="da('photo_a_2','photo_b_2')" onmouseout="xiao('photo_a_2','photo_b_2')" class="palylist__cover">
									<a href="PlaySerlet?mid0=20&mid1=21&mid2=22&mid3=23&mid4=24">
										<img id="photo_a_2" onmousemove="da('photo_a_2','photo_b_2')" onmouseout="xiao('photo_a_2','photo_b_2')" src="images/am4.jpg"
										 alt="">
										<img id="photo_b_2" onmousemove="da('photo_a_2','photo_b_2')" onmouseout="xiao('photo_a_2','photo_b_2')" src="images/play.png"
										 alt="">

									</a>
								</div>
								<h4 class="palylist__title">
									<span class="palylist__title_txt"><a href="#">岁月神偷｜周笔畅</a></span>
								</h4>
								<div class="palylist__other">
									播放量：61.6万
								</div>

							</div>
						</li>
						<li class="palylist__item slide__item">
							<div class="palylist__item_box">
								<div onmousemove="da('photo_a_3','photo_b_3')" onmouseout="xiao('photo_a_3','photo_b_3')" class="palylist__cover">
									<a href="PlaySerlet?mid0=6&mid1=7&mid2=12&mid3=5&mid4=21">
										<img id="photo_a_3" onmousemove="da('photo_a_3','photo_b_3')" onmouseout="xiao('photo_a_3','photo_b_3')" src="images/am5.jpg"
										 alt="">
										<img id="photo_b_3" onmousemove="da('photo_a_3','photo_b_3')" onmouseout="xiao('photo_a_3','photo_b_3')" src="images/play.png"
										 alt="">

									</a>
								</div>
								<h4 class="palylist__title">
									<span class="palylist__title_txt"><a href="#">十一月的萧邦 | 周杰伦</a></span>
								</h4>
								<div class="palylist__other">
									播放量：53.9万
								</div>

							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
</body>
</html>